<template>
  <div class="contain">
    <!-- 菜单栏选择器 -->
    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
        <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
          <keep-alive>
            <tab-pane v-if="activeName==item.key" :type="item.key"/>
          </keep-alive>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TabPane from '@/components/admin/timeData/TabPane.vue';
export default {
    components: {
        TabPane
    },
    name:"dataVisual",
    data() {
        return {
            activeName: 'GapOfWeek',
            tabMapOptions:[
                { label: "本周缺口图",key:'GapOfWeek'},
                { label: "暂无",key:'NoData1'},
                { label: "暂无",key:'NoData2'},
                { label: "暂无",key:'NoData3'}
            ]
        }
    },
    watch: {
      // 对路由显示进行管理
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
      }
    },
    created() {
    // 初始默认块
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
}
</script>

<style scoped>
.contain{
    width: 100%;
    background-color: #EBEEF5;
    margin-top: 20px;
}
/deep/.el-tabs{
  box-shadow: none;
}
</style>